<template>
  <ul :class="[customClass, 'sign-process', wrapClass]">
    <li
      v-for="(item, index) in formatData"
      :key="index"
      :class="[itemClass, 'sign-process__item']"
    >
      <div class="sign-process__item__content">
        <template v-if="item.isPlaceholder">
          <div class="sign-process__item__content__middle" />
        </template>

        <template v-else>
          <div class="sign-process__item__content__top">
            <img
              :src="require('../assets/img/home/' + item.type + '.png')"
              alt=""
            />
            <span>x{{ item.value }}</span>
          </div>
          <div
            :class="[
              {
                'sign-process__item__content__middle--active':
                  active >= item.day,
              },
              'sign-process__item__content__middle',
            ]"
          />
          <div class="sign-process__item__content__bottom">
            <span>{{ item.day }}</span
            >天
          </div>
        </template>
      </div>
      <div class="tail" v-if="formatData.length - 1 !== index" />
    </li>
  </ul>
</template>

<script>
export default {
  name: "SignProcess",
  props: {
    customClass: String,
    active: {
      type: Number,
      default: -1,
    },
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    maxNum: {
      type: Number,
      default: 6,
    },
  },
  data() {
    return {};
  },
  computed: {
    formatData() {
      const length = this.data.length;
      const diff = this.maxNum - length;

      if (diff > 0) {
        return [...this.data, ...new Array(diff).fill({ isPlaceholder: true })];
      }

      return this.data;
    },
    wrapClass() {
      return {
        "sign-process--flex": this.data.length <= this.maxNum,
      };
    },
    itemClass() {
      return {
        "sign-process__item--flex": this.data.length <= this.maxNum,
        "sign-process__item--20": this.data.length > this.maxNum,
      };
    },
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
ul,
li {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.sign-process {
  font-size: 12px;
  padding: 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  height: 80px;

  &--flex {
    display: flex;
  }

  &__item {
    display: inline-flex;
    align-items: center;
    height: 100%;

    &--flex {
      flex: 1 1 auto;
      &:last-child {
        flex: 0 0 auto !important;
      }
    }

    &--20 {
      width: 20%;

      &:last-child {
        width: auto;
      }
    }

    &__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      &__top {
        position: absolute;
        top: -38px;
        width: 38px;
        height: 44px;
        // background: url(../assets/img/home/bg2.png) no-repeat center center;
        background-size: 100% 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        span {
          color: #ed3e3e;
        }
        img {
          width: 20px;
          height: 23px;
        }
      }

      &__middle {
        width: 18px;
        height: 18px;

        overflow: hidden;
        margin: 4px 0;
        background: url(../assets/img/home/cpmpleteno.png) no-repeat center
          center;
        background-size: 100% 100%;
        &--active {
          width: 20px;
          height: 20px;
          background: url(../assets/img/home/cpmplete.png) no-repeat center
            center;
          background-size: 100% 100%;
          margin: 4px 0;
        }
      }

      &__bottom {
        position: absolute;
        top: 32px;
        text-align: center;
      }
    }

    .tail {
      background: #ebebeb;
      width: 100%;
      height: 1px;
    }
  }
}
</style>



